<<<<<<< HEAD
<template>
	<view>
	
		
		<view class="display">
			<view class="left" :style="{height:windowHeight+'rpx'}">
				<!-- <block v-for="(item,index) in cateList" :key="index">
					<view @click="selLeft(index,item.id)" :class="leftIndex == item.id ? 'sel-left' : 'no-sel-left'">{{item.name}}</view>
				</block> -->
			</view>
			<view class="right">
				<block v-if="list.length > 0">
					<view class="display-fw-js padding_0_30rpx">
					<!-- 	<block v-for="(item,index) in list" :key="index">
							<view @click="detail(item.id)" class="margin-bottom_20rpx">
								<view class="frame display-a-jc">
									<image v-if="Number(item.inventory) < 1" class="index-54" :src="imgUrl+'index/54.png'"></image>
									<image class="shop-img" :src="item.pic_url"></image>
								</view>
								<view class="version">
									<view class="shop-name font-overflow2">{{item.name}}</view>
									<view class="color_12CDC2">
										<span class="font-size_32rpx font-weight_bold">
											<block v-if="item.pay_type == 1">{{item.integral}}</block>
											<block v-if="item.pay_type == 2">￥{{item.money}}{{'+'+item.integral}}</block>
											<block v-if="item.pay_type == 3">￥{{item.money}}</block>
										</span>
										<span class="font-size_24rpx">
											<block v-if="item.pay_type != 3">{{' '+system.recycle}}</block>
										</span>
									</view>
									<view class="color_757575">
										<view class="font-size_24rpx padding_10rpx_0">市场价￥{{item.price}}</view>
										<view class="font-size_24rpx">库存 {{item.inventory}}</view>
									</view>
								</view>
							</view>
						</block> -->
					</view>
				</block>
				<mescroll-empty v-else></mescroll-empty>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				imgUrl: this.$imgUrl,
				
				system: uni.getStorageSync("system"),
				
				name: '',
				
				cateList: [],
				leftIndex: '',
				
				list: [],
				
				windowHeight: '',
				serviceList:[]
			}
		},
		
		onLoad(options) {
			
			this.getServiceCategories();
		},
		
		onShow() {
			this.getCate();
			this.getShopList();
		},
		
		methods: {
		
		
		   async getServiceCategories() {
		   	const result = await this.$http.get({
		   		url: this.$api.getByTechnicianCategory,
		   		data: {
		   			technicianId: '1' // 站点id
		   			// siteId: this.siteId // 站点id
		   		}
		   	});
		   	if (result.code == 200) {
		   		console.log('查询类目result.', result);
		   		this.serviceList = result.data;
				console.log(this.serviceList)
		   	
		   	} else {
		   		this.$sun.toast(result.message)
		   	}
		   },
		
			confirmChange(e) {
				this.name = e.detail.value;
				this.getShopList();
			},
		
		
			
			selLeft(index,id) {
				this.leftIndex = id;
				this.getShopList();
			},
			
			//商品分类
			async getCate() {
				const result = await this.$http.post({
					url: this.$api.goodsCateList,
					data: {
						page: 1,
						psize: 100
					}
				});
				if (result.errno == 0) {
					if (result.data.list.length > 0){
						let arrObj = {
							id: '',
							pic_url: this.imgUrl + 'index/58.png',
							name: '全部'
						}
						result.data.list.unshift(arrObj);
						this.cateList = result.data.list;
					}
				}
			},
			
			//热门商品
			async getShopList() {
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						category_id: this.leftIndex,
						name: this.name,
						is_recommend: '',
						page: 1,
						psize: 100
					}
				});
				if (result.errno == 0) {
					this.list = result.data.list;
				}
			},
			
		}
	}
</script>

<style lang="scss">
	
	.shop-name {
		height: 80rpx;
		margin-bottom: 8rpx;
		font-size: 32rpx;
	}
	
	.shop-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}
	
	.version {
		width: 240rpx;
	}
	
	.index-54 {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		z-index: 99;
		// left: 93rpx;
		// top: 93rpx;
	}
	
	.frame {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.right {
		width: 580rpx;
		padding: 20rpx 0 10rpx;
	}
	
	.no-sel-left {
		text-align: center;
		padding: 26rpx 10rpx;
		color: #757575;
	}
	
	.sel-left {
		background-color: #36BFC5;
		text-align: center;
		padding: 30rpx 10rpx;
		color: #FFFFFF;
	}
	
	.left {
		width: 170rpx;
		background-color: #f7f7f7;
	}
	
	page {
		background-color: #FFFFFF;
		padding-top: 20rpx;
	}
	
	.search {
		width: 700rpx;
		background-color: #F7F7F7;
		padding: 16rpx 20rpx;
		border-radius: 100rpx;
		margin: 0 25rpx 20rpx;
		>input {
			width: 520rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}
	
</style>
=======
<template>
	<view>


		<view class="display">
			<view class="left" :style="{height:windowHeight+'vh'}">
				<block v-for="(item,index) in serviceList" :key="index">
					<view @click="selLeft(index,item.id)" :class="leftIndex == index ? 'sel-left' : 'no-sel-left'">
						{{item.classificationName}}
					</view>
				</block>
			</view>
			<view class="right">
				<block v-if="packageList.length > 0">
					<view class="provide-project flex-align-center" v-for="(item,index) in packageList" :key="index">
						<image :src="item.rotationChart"></image>
						<view class="remaining-width m-left20">
							<view class="font32 color333">{{item.tradeName}}</view>
							<view class="font-overflow color999 p-align-top10">
							</view>
							<view class="flex-align-center">

								<view class="bj-time golden  flex-align-center">
									<text class="font24 iconfont icon-shijian m-right10"></text>
									<view class="font24 m-bottom4">{{item.serviceTime}}分钟</view>
								</view>
							</view>
							<view class="flex-between p-top20">
								<view class="flex-align-center">
									<text class="font36 red">￥{{item.plusClockPrice}}</text>
									<view class="font24 color999 text-decoration ">￥{{item.originalServicePrice}}
									</view>
								</view>
							</view>
							<view>
							</view>
						</view>
						<checkbox-group @change="event=>checkeBoxPackage(event,item.id)">
							<label class="sunui-chekcbox-label">
								<checkbox :checked="item.checked"></checkbox>
							</label>
						</checkbox-group>
					</view>

				</block>
				<mescroll-empty v-else></mescroll-empty>
				<view class="fixed-bj flex" @click="saveCategory()">
					<view class="confirm-btn flex">确认并提交</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {

		mapMutations
	} from 'vuex'
	import {
		mapState
	} from 'vuex'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

				imgUrl: this.$imgUrl,

				system: uni.getStorageSync("system"),

				name: '',

				cateList: [],
				leftIndex: '',

				list: [],

				windowHeight: '100',
				serviceList: [],
				selectServiceList: [],
				// 套餐列表
				packageList: [],
				categories: '',
				// 套餐数组
				packageArr: [],
				statusId: ''
			}
		},

		onLoad(options) {

			this.getServiceCategories();
			this.getByTechnicianCategory()
		},

		onShow() {


		},
		computed: {

			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('user', ['basicAuthenticationForm', 'uploadQualificationForm', 'uploadHealthCertificateForm',
				'uploadAvatarForm', 'identityAuthenticationForm', 'technicianDetails'
			]),

		},
		methods: {

			...mapMutations('user', ['uploadProgress', 'uploadTaskCenter']),
			// 查询类目
			async getServiceCategories() {
				const result = await this.$http.get({
					url: this.$api.getByServiceCategoriesSiteId,
					data: {
						siteId: uni.getStorageSync('siteId') // 站点id
						// siteId: this.siteId // 站点id 
					}
				});
				if (result.code == 200) {
					console.log('查询类目result.', result);
					this.serviceList = result.data;
					this.selLeft(0, this.serviceList[0].id)

				} else {
					this.$sun.toast(result.message)
				}
			},

			async getByTechnicianCategory() {
				const res = await this.$http.get({
					url: this.$api.getSelectTechnicianId,
					data: {
						// siteId: uni.getStorageSync('siteId'), // 站点id
						// serviceCategoriesId: id
						technicianId: uni.getStorageSync('technicianId')
					}
				});
				console.log(res)
				if (res.data) {
					const savePackage = res.data.map((item) => {
						return {
							technicianId: uni.getStorageSync('technicianId'),
							packageId: item.id,
							categoriesId: item.serviceCategoriesId

						}
					})
					console.log(savePackage)
					uni.setStorageSync('savePackage', savePackage)
				}

			},
			async checkeBoxPackage(event, id) {
				if (event.detail.value[0] == '') {
					//    console.log(this.packageList)
					// this.packageList.forEach((item) => {
					// 	this.$set(item, 'checked', false);
					// })
					// this.$at.uniDoFunc({
					// 	// 键名
					// 	key: 'submit',
					// 	success: async () => {
					// 		//锁定
					// 		this.$at.lockKey('submit');
					this.packageList.find(p => {
						if (id == p.id) {
							// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
							p.checked ? (p.checked = false) : (p.checked = true);
							// this.$set(p, 'isCheckBox', true);

							this.packageArr.push({
								technicianId: uni.getStorageSync('technicianId'),
								packageId: id,
								categoriesId: this.categories
							})

							console.log(this.packageArr)


						}
					});
					const concat = uni.getStorageSync('savePackage') ? uni.getStorageSync('savePackage').concat(this
						.packageArr) : this.packageArr
					const uniqueArray = Array.from(new Set(concat.map(JSON
						.stringify))).map(JSON
						.parse);
					// 如果存储里面有值一起合并

					uni.setStorageSync('savePackage', uniqueArray)
					console.log(uni.getStorageSync('savePackage') + '=====过滤后数组')
				} else {


					const index = uni.getStorageSync('savePackage').findIndex(item => {
						return item.packageId == id
					})

					if (index !== -1) {
						const savePackage = uni.getStorageSync('savePackage')

						savePackage.splice(index, 1)
						this.packageArr = savePackage
					}
					this.$at.releaseKey('submit');
					console.log(this.packageArr)

					uni.setStorageSync('savePackage', this.packageArr)


				}

			},

			async getShopList(id) {


				// 获取套餐列表
				const result = await this.$http.get({
					url: this.$api.queryPackage,
					data: {
						serviceCategoriesId: id // 站点域名(传值将https截取)
					}
				});
				if (result.code == 200) {
					
					this.packageList = result.data;

					this.packageList.forEach((item) => {
						item.checked ? (item.checked = true) : (item.checked = false);
					
						
						const resIndex = uni.getStorageSync('savePackage')?.findIndex((p) => {
							return item.id == p.packageId
						})
                   
				
				
						
							console.log(resIndex + '------------------')
							if (resIndex != -1) {
								
								item.checked = true
							}
			
					

					})
			
					console.log(this.packageList)
				}

			},

			confirmChange(e) {
				this.name = e.detail.value;

			},
			async saveCategory() {
				const uniqueArray = Array.from(new Set(uni.getStorageSync('savePackage').map(JSON
					.stringify))).map(JSON
					.parse);
				if (!uniqueArray.length) {
					this.$sun.toast('请选择一个套餐')
					return
				}
				console.log(this.technicianDetails.authenticationNot)
				this.uploadTaskCenter({
					status: true,
					name: 'serviceItemsEnd'
				})

				if (this.technicianDetails.authenticationNot == 3) {
					const res = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							id: uni.getStorageSync('technicianId'),
							userId: uni.getStorageSync('userId'),
							siteId: uni.getStorageSync('siteId'),
							authenticationNot: 3,
						}
					});
				} else {
					const res = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							id: uni.getStorageSync('technicianId'),
							userId: uni.getStorageSync('userId'),
							siteId: uni.getStorageSync('siteId'),
							authenticationNot: 2,
						}
					});
				}



				console.log(uniqueArray)
				const result = await this.$http.post({
					url: this.$api.savePackage,
					data: uniqueArray
					// data:this.packageArr
				});

				if (result.code == 200) {
					console.log('查询类目result.', result);
					uni.setStorageSync('savePackage', [])
					console.log(this.packageArr)
					this.packageArr = []
					this.$sun.navSwitch('/pages/my/my');

				} else {
					this.$sun.toast(result.message)
				}

			},
			selLeft(index, id) {
				console.log(index)
				this.leftIndex = index
				this.categories = id;
				this.getShopList(id);
			},
		}
	}
</script>

<style lang="scss">
	.provide-project {
		border-top: 2rpx solid #f4f4f4;
		background-color: #fff;
		padding: 20rpx 0;
		margin: 0px 10px;

		image {
			width: 192rpx;
			height: 192rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}

		// 右侧剩余宽度
		.remaining-width {
			width: calc(100% - 198rpx);

			button {
				border-radius: 76rpx;
				background-color: #406eff;
				color: #406eff;
				width: 150rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 28rpx;
				padding: 0rpx;
				margin: 0rpx;
			}

			.reservation-border {
				border: 2rpx solid #FF7B15;

				.reservation-img {
					width: 32rpx;
					height: 32rpx;
					background-color: #FF7B15;

					image {
						height: 30rpx;
					}
				}

				.reservation-text {
					margin: 0 10rpx;
					color: #EC724C;
					font-size: 24rpx;

				}
			}

			.bj-time {
				padding: 2rpx 16rpx 2rpx 6rpx;
				border-radius: 12rpx;
				background: linear-gradient(92deg, #3A2800 4.83%, #563600 96.02%);

				.m-bottom4 {
					margin-bottom: 4rpx;
				}
			}
		}
	}

	.shop-name {
		height: 80rpx;
		margin-bottom: 8rpx;
		font-size: 32rpx;
	}

	.shop-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}

	.version {
		width: 240rpx;
	}

	.index-54 {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		z-index: 99;
		// left: 93rpx;
		// top: 93rpx;
	}

	.frame {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.right {
		width: 580rpx;
		padding: 20rpx 0 10rpx;

		.fixed-bj {
			z-index: 9;
			width: 100%;
			height: 200rpx;
			position: fixed;
			bottom: 0;
			left: 82rpx;
		}

		.confirm-btn {
			color: #fff;
			font-size: 36rpx;
			border-radius: 20rpx;
			background: #1890ff;
			width: 464rpx;
			height: 100rpx;
		}
	}

	.no-sel-left {
		text-align: center;
		padding: 26rpx 10rpx;
		color: #757575;
	}

	.sel-left {
		background-color: #406eff;
		text-align: center;
		padding: 30rpx 10rpx;
		color: #FFFFFF;
	}

	.left {
		width: 170rpx;
		background-color: #f7f7f7;
	}

	page {
		background-color: #FFFFFF;
		padding-top: 20rpx;
	}

	.search {
		width: 700rpx;
		background-color: #F7F7F7;
		padding: 16rpx 20rpx;
		border-radius: 100rpx;
		margin: 0 25rpx 20rpx;

		>input {
			width: 520rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}
</style>
>>>>>>> 52b948355e151c415e9c82e94b1b31e76c5ad35e
